<template>
  <div class="complaint-container">
    <!-- 表单标题区域 -->
    <div class="form-header">
      <h2 class="form-title">投诉建议</h2>
      <p class="form-subtitle">我们重视您的反馈，将尽快处理并回复</p>
    </div>

    <!-- 表单主体 -->
    <form class="complaint-form" @submit.prevent="handleSubmit">
      <!-- 投诉类型选择 -->
      <div class="form-group">
        <label class="form-label">投诉建议类型</label>
        <div class="radio-group">
          <label class="radio-item" v-for="type in complaintTypes" :key="type.value">
            <input 
              type="radio" 
              name="complaintType" 
              :value="type.value" 
              v-model="form.complaintType"
              class="radio-input"
            >
            <span class="radio-label">{{ type.label }}</span>
          </label>
        </div>
      </div>

      <!-- 姓名输入 -->
      <div class="form-group">
        <label for="name" class="form-label">姓名 <span class="required">*</span></label>
        <input 
          type="text" 
          id="name" 
          v-model="form.name" 
          class="form-input"
          placeholder="请输入您的姓名"
          required
        >
      </div>

      <!-- 电子邮箱输入 -->
      <div class="form-group">
        <label for="email" class="form-label">电子邮箱 <span class="required">*</span></label>
        <input 
          type="email" 
          id="email" 
          v-model="form.email" 
          class="form-input"
          placeholder="请输入您的电子邮箱"
          required
        >
      </div>

      <!-- 地址输入 -->
      <div class="form-group">
        <label for="address" class="form-label">地址</label>
        <input 
          type="text" 
          id="address" 
          v-model="form.address" 
          class="form-input"
          placeholder="请输入您的地址（选填）"
        >
      </div>

      <!-- 联系电话输入 -->
      <div class="form-group">
        <label for="phone" class="form-label">联系电话 <span class="required">*</span></label>
        <input 
          type="tel" 
          id="phone" 
          v-model="form.phone" 
          class="form-input"
          placeholder="请输入您的联系电话"
          required
        >
      </div>

      <!-- 投诉内容输入 -->
      <div class="form-group">
        <label for="content" class="form-label">内容 <span class="required">*</span></label>
        <textarea 
          id="content" 
          v-model="form.content" 
          class="form-textarea"
          placeholder="请详细描述您的投诉或建议内容..."
          rows="5"
          required
        ></textarea>
        <p class="word-count">{{ form.content.length }}/500</p>
      </div>

      <!-- 提交按钮 -->
      <div class="form-actions">
        <button type="submit" class="submit-btn" :disabled="isSubmitting">
          <span v-if="!isSubmitting">提交投诉建议</span>
          <span v-if="isSubmitting">提交中...</span>
        </button>
      </div>
    </form>

    <!-- 提交成功弹窗 -->
    <div class="modal" v-if="showSuccessModal">
      <div class="modal-content">
        <div class="modal-icon">✓</div>
        <h3 class="modal-title">提交成功</h3>
        <p class="modal-message">感谢您的反馈，我们将尽快处理并与您联系</p>
        <button class="modal-btn" @click="showSuccessModal = false">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单数据
      form: {
        complaintType: '',
        name: '',
        email: '',
        address: '',
        phone: '',
        content: ''
      },
      // 投诉类型选项
      complaintTypes: [
        { label: '产品相关', value: 'product' },
        { label: '售后相关', value: 'afterSale' },
        { label: '服务相关', value: 'service' },
        { label: '其他相关', value: 'other' },
        { label: '订单相关', value: 'order' },
        { label: '政策相关', value: 'policy' },
        { label: '网站相关', value: 'website' }
      ],
      // 提交状态
      isSubmitting: false,
      // 成功弹窗显示状态
      showSuccessModal: false
    };
  },
  methods: {
    // 处理表单提交
    handleSubmit() {
      this.isSubmitting = true;
      
      // 模拟API请求
      setTimeout(() => {
        this.isSubmitting = false;
        this.showSuccessModal = true;
        // 重置表单
        this.form = {
          complaintType: '',
          name: '',
          email: '',
          address: '',
          phone: '',
          content: ''
        };
      }, 1500);
    }
  }
};
</script>

<style scoped>
.complaint-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* 表单标题样式 */
.form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.form-title {
  color: #2c3e50;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  position: relative;
  display: inline-block;
}

.form-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: #3498db;
  border-radius: 3px;
}

.form-subtitle {
  color: #7f8c8d;
  font-size: 1rem;
  margin: 0;
}

/* 表单组样式 */
.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  color: #34495e;
  font-weight: 500;
}

.required {
  color: #e74c3c;
}

/* 输入框样式 */
.form-input, .form-textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #bdc3c7;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* 单选按钮组样式 */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.5rem;
}

.radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-input {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

.radio-label {
  position: relative;
  padding-left: 1.5rem;
  color: #34495e;
  transition: color 0.3s;
}

.radio-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid #bdc3c7;
  border-radius: 50%;
  transition: border-color 0.3s;
}

.radio-input:checked + .radio-label::before {
  border-color: #3498db;
}

.radio-input:checked + .radio-label::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #3498db;
  border-radius: 50%;
}

.radio-item:hover .radio-label {
  color: #3498db;
}

/* 字数统计 */
.word-count {
  text-align: right;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: #7f8c8d;
}

/* 按钮样式 */
.form-actions {
  margin-top: 2rem;
  text-align: center;
}

.submit-btn {
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;
}

.submit-btn:hover {
  background-color: #2980b9;
}

.submit-btn:active {
  transform: translateY(2px);
}

.submit-btn:disabled {
  background-color: #bdc3c7;
  cursor: not-allowed;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  animation: fadeIn 0.3s;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  width: 90%;
  max-width: 400px;
  animation: slideIn 0.3s;
}

.modal-icon {
  font-size: 3rem;
  color: #2ecc71;
  margin-bottom: 1rem;
}

.modal-title {
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.modal-message {
  color: #7f8c8d;
  margin-bottom: 1.5rem;
}

.modal-btn {
  background-color: #3498db;
  color: white;
  border: none;
  padding: 0.7rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.modal-btn:hover {
  background-color: #2980b9;
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .complaint-container {
    padding: 1rem;
    margin: 1rem auto;
  }
  
  .radio-group {
    gap: 0.8rem;
  }
  
  .radio-label {
    font-size: 0.9rem;
  }
}
</style>